<template>
	<div class="dmright">
		<tithead>数据统计告警</tithead>
		<div style="height: 280rem;display: flex;">
			<div style="flex: 1;" class="tjbox">
				<div class="eachitem">
					<div style="flex: 1;" class="lf">
						<img src="../../../assets/day.png" />实时统计
					</div>
					<div style="flex: 1.2;" class="rt">
						<span style="font-family: DIN1451;font-size: 14rem;color: #01A2FF;margin-right: 3rem;">
							{{daynum}}
						</span>m³
					</div>
				</div>
				<div class="eachitem">
					<div style="flex: 1;" class="lf">
						<img src="../../../assets/day.png" />当日累计
					</div>
					<div style="flex: 1.2;" class="rt">
						<span style="font-family: DIN1451;font-size: 14rem;color: #1AD252;margin-right: 3rem;">95864</span>m³
					</div>
				</div>
				<div class="eachitem">
					<div style="flex: 1;" class="lf">
						<img src="../../../assets/day.png" />当月累计
					</div>
					<div style="flex: 1.2;" class="rt">
						<span style="font-family: DIN1451;font-size: 14rem;color: #FFDE00;margin-right: 3rem;">364679</span>m³
					</div>
				</div>
				<div class="eachitem">
					<div style="flex: 1;" class="lf">
						<img src="../../../assets/day.png" />当年累计
					</div>
					<div style="flex: 1.2;" class="rt">
						<span style="font-family: DIN1451;font-size: 14rem;color: #FFDE00;margin-right: 3rem;">364679123</span>m³
					</div>
				</div>
			</div>
			<dv-decoration-2 :reverse="true" style="height:280rem;width: 10rem;" :dur='2' />
			<div style="flex: 1.2;">
				<div class="bjtit">
					<span>名称：测试名称</span>
					<span>当前状态：正常</span>
				</div>
				<div class="flowbox">
					<div class="ec">
						<span>13</span>
						<span>本日报警</span>
					</div>
					<div class="ec">
						<span>28</span>
						<span>本周报警</span>
					</div>
					<div class="ec">
						<span>35%</span>
						<span>本月报警</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'dmright',
		data() {
			return {
				daynum: 0
			}
		},
		created() {
			window.setInterval(() => {
				this.daynum > 999999999 ? this.daynum = 0 : this.daynum += 1253
			}, 800)
		}
	}
</script>
<style lang='scss'>
	.dmright {
		margin: 10rem auto 0;
		width: 95%;

		.tit {
			display: inline-block;
			padding-left: 6rem;
			border-left: 6rem solid skyblue;
			color: white;
			font-size: 13rem;
		}

		.rtit {
			display: inline-block;
			color: white;
			font-size: 13rem;
			padding-right: 6rem;
			border-right: 6rem solid skyblue;
		}

		.tjbox {
			display: flex;
			flex-direction: column;
			align-items: center;


			.eachitem {
				margin-bottom: 20rem;
				color: white;
				display: flex;
				background: url(../../../assets/day-bg.png);
				background-size: 100% 100%;
				height: 30rem;
				width: 95%;

				.lf {
					display: flex;
					font-size: 12rem;
					align-items: center;
					margin-left: 15rem;
				}

				.rt {
					display: flex;
					align-items: center;
					font-size: 12rem;
					justify-content: flex-end;
					margin-right: 15rem;
				}

				img {
					width: 15rem;
					height: 15rem;
					margin-right: 5rem;
				}
			}
		}

		.bjtit {
			display: flex;
			justify-content: space-around;
			color: white;
			font-size: 14rem;
		}

		.flowbox {
			display: flex;
			flex-flow: row wrap;

			.ec {
				width: 45%;
				margin: 10rem 2%;
				color: white;
				font-size: 15rem;
				font-weight: bold;
				display: flex;
				flex-direction: column;
				border-radius: 5rem;

				span {
					margin: 2rem auto;
				}
			}
		}
	}
</style>
